<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt">
      <el-form
        ref="thisForm"
        :model="thisForm"
        label-width="75px"
        label-position="right"
        @submit.native.prevent
        inline
      >
        <el-form-item label="对象类型" label-for="objType">
          <el-select v-model="thisForm.objType" clearable @change="objTypeChange">
            <el-option v-for="item in objType" :value="item.value" :key="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关键字搜索" label-for="keyword">
          <el-input
            v-model="thisForm.keyword"
            placeholder="请输入关键字"
          >
            <el-button type="primary" slot="append" @click="searchs" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>

        <el-form-item label="时间选择">
          <el-radio-group
            v-model="thisForm.date"
            type="button"
            @change="selectChange(thisForm.date)"
            class="mr"
          >
            <el-radio-button :label="item.val" v-for="(item, i) in fromList.fromTxt" :key="i">{{ item.text }}</el-radio-button>
          </el-radio-group>
          <el-date-picker
            @change="onchangeTime"
            v-model="timeVal"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            type="daterange"
            style="width: 300px"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        ref="table"
        class="mt25"
        :loading="loading"
        highlight-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="对象模型" min-width="40" #default="{row}">{{row.objType}}</el-table-column>
        <el-table-column label="操作人姓名" min-width="80" #default="{row}">{{row.operationUserName}}</el-table-column>
        <el-table-column label="操作人类型" min-width="80" #default="{row}">{{row.opUserType}}</el-table-column>
        <el-table-column label="操作类型" min-width="80" #default="{row}">{{row.operationType}}</el-table-column>
        <el-table-column label="日志说明" min-width="200" #default="{row}">{{row.logContent}}</el-table-column>
        <el-table-column label="操作时间" min-width="150" #default="{row}">{{row.operationTimeStr}}</el-table-column>

        </el-table>
      <div class="acea-row row-right page">
        <el-pagination
          :total="total"
          :current-page="thisForm.page"
          @current-change="pageChange"
          type="total, prev"
          :page-size="thisForm.limit"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { getServiceLog } from '@/api/onsite';
export default {
  name: 'log',
  data() {
    return {
      grid: {
        xl: 11,
        lg: 11,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
     
      thisForm: {
        page: 1,
        limit: 12,
        keyword: '',
        date: '',
        objType: '',
      },
      list: [],
      total: 0,
      timeVal: [],
      fromList: {
        title: '选择时间',
        custom: true,
        fromTxt: [
          { text: '全部', val: '' },
          { text: '今天', val: 'today' },
          { text: '昨天', val: 'yesterday' },
          { text: '本周', val: 'week' },
          { text: '本月', val: 'month' },
          { text: '本季度', val: 'quarter' },
          { text: '本年', val: 'year' },
        ],
      },
      objType: [
        {
          value: 1,
          label: '用户操作',
        },
        {
          value: 2,
          label: '订单操作',
        },
        {
          value: 3,
          label: '消息提醒',
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      if(!e){
        this.thisForm.date = '';
      }else{
        this.thisForm.date = this.timeVal.join('-');
      }
      console.log(e)
      this.thisForm.page = 1;
      this.getList();
    },
    // 选择时间
    selectChange(tab) {
      this.thisForm.page = 1;
      this.thisForm.date = tab;
      this.timeVal = [];
      this.getList();
    },
    // 选择操作类型
    objTypeChange(index) {
      this.thisForm.objType = index;
      this.searchs();
    },
    // 列表
    getList() {
      this.loading = true;
      getServiceLog(this.thisForm)
        .then(async (res) => {
          let data = res;
          this.list = data.list;
          this.total = data.total;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    // 分页
    pageChange(index) {
        console.log('人呢')
      this.thisForm.page = index;
      this.getList();
    },
    // 搜索
    searchs() {
      this.thisForm.page = 1;
      this.getList();
    },
  },
};
</script>
<style scoped lang="stylus"></style>